<template>
  <div class="home">
    <el-container class="home-container">
      <!-- 这是头部区 -->
      <el-header>
        <h2>电商后台管理系统</h2>
        <el-button type="info" @click="logout()">退出登录</el-button>
      </el-header>
      <!-- 页面主体区 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside>
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#2b2e33"
              text-color="#fff"
              active-text-color="#ffd04b">
            <el-menu-item index="1">
              <i class="el-icon-location"></i>
              <router-link to="/home" tag="span"><span>首页</span></router-link>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">商品</span>
              </template>
              <el-menu-item index="2-1">
                <router-link to="/home/commodity" tag="span"><span>商品管理</span></router-link>
              </el-menu-item>
              <el-menu-item index="2-2">
                <router-link to="/home/category" tag="span">
                  <span>品类管理</span>
                </router-link>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">订单</span>
              </template>
              <el-menu-item index="3-1">
                <router-link to="/home/orderform" tag="span"><span>订单管理</span></router-link>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">用户</span>
              </template>
              <el-menu-item index="4-1">
                <router-link to="/home/consumer" tag="span"><span>用户列表</span></router-link>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右侧内容区 -->
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>
<style scoped lang="less">
.home {
  height: 100%;
  width: 100%;
  position: fixed;
}

.home-container {
  height: 100%;
  width: 100%;
}

.el-header {
  background: #46474b;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h2 {
    color: #fff;
  }
}

.el-aside {
  background: #2b2e33;
}

.el-main {
  background: #fdfdfdb7;
  height: 720px;
  overflow-y: auto;
}
</style>
